@import "base.less";

@esui-label-padding: .5em .8em;
@esui-label-circular-padding: .5em;
@esui-label-border-radius: 0;

.@{ui-class-prefix}-label {
    display: inline-block;
}

.@{ui-class-prefix}-label-custom {
    display: inline-block;
    vertical-align: middle;
    padding: @esui-label-padding;

    .esui-border-radius(
        @esui-label-border-radius,
        @esui-label-border-radius
    );
    .esui-label-theme();
}

.@{ui-class-prefix}-label-primary {
    .esui-label-primary-theme();
}

.@{ui-class-prefix}-label-success {
    .esui-label-success-theme();
}

.@{ui-class-prefix}-label-warning {
    .esui-label-warning-theme();
}

.@{ui-class-prefix}-label-danger {
    .esui-label-danger-theme();
}

.@{ui-class-prefix}-label-info {
    .esui-label-info-theme();
}

.@{ui-class-prefix}-label-pointer {
    position: relative;
    margin-top: .8em;
    &:before {
        .triangle(top, 1em, @esui-label-background, side);
        border-width: 0.7em;
        content: '';
        left: 50%;
        margin-top: 0;
        top: -0.5em;
        border-top: 0;
    }
}

.@{ui-class-prefix}-label-pointer-bottom {
    position: relative;
    margin-bottom: .8em;
    &:before {
        .triangle(bottom, 1em, @esui-label-background, side);
        border-width: 0.7em;
        content: '';
        left: 50%;
        margin-top: 0;
        bottom: -.5em;
        border-bottom: 0;
    }
}

.@{ui-class-prefix}-label-pointer-left {
    position: relative;
    margin-left: .8em;
    &:before {
        .triangle(left, 1em, @esui-label-background, side);
        border-width: 0.7em;
        content: '';
        left: -0.5em;
        margin-top: 0;
        border-left: 0;
        margin-left: 0;
    }
}

.@{ui-class-prefix}-label-pointer-right {
    position: relative;
    margin-right: .8em;
    &:before {
        .triangle(right, 1em, @esui-label-background, side);
        border-width: 0.7em;
        content: '';
        right: 0;
        margin-top: 0;
        border-right: 0;
        right: -.5em;
    }
}

.@{ui-class-prefix}-label-transparent {
    background: none;
}

.@{ui-class-prefix}-label-circular {
    min-width: 1em;
    min-height: 1em;

    line-height: 1;
    text-align: center;
    padding: @esui-label-circular-padding;

    .esui-circular();
}

.@{ui-class-prefix}-label-slim {
    padding: 0 .2em;
}

// themes
.esui-label-theme() {}
.esui-label-primary-theme() {}
.esui-label-success-theme() {}
.esui-label-warning-theme() {}
.esui-label-danger-theme() {}
.esui-label-info-theme() {}